<template>
	<view class="main">
		<pageLoading mode="if" :show="isShow">
			<!-- 订单详情 -->
			<view>
				<view class="title card">订单详情</view>
				<view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>订单编号</view>
						<view>{{info.order_sn}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>设备编号</view>
						<view>{{info.device_no}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>下单时间</view>
						<view>{{info.createtime}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>订单金额</view>
						<view style="color: #F95533;">￥{{info.total_money}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>支付状态</view>
						<view style="color: #00D899;">{{info.order_status_text}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>支付时间</view>
						<view>{{info.paytime}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>支付方式</view>
						<view>{{info.pay_way | filterPay}}</view>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view>
				<view class="title card">商品信息</view>
				<view v-for="(item,i) in info.goods" :key="item.id" style="margin-bottom: 10rpx;">
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>商品名称</view>
						<view>{{item.goods_name}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>商品数量</view>
						<view>{{item.quantity}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card">
						<view>商品金额</view>
						<view>{{item.goods_price}}</view>
					</view>
					<view class="flex flex-ai-c flex-jc-sb card" v-if="item.quantity > 1">
						<view>商品单价</view>
						<view>{{price(item.goods_price,item.quantity)}}</view>
					</view>
				</view>
			</view>
			<!-- 小计 -->
			<view class="title card flex flex-ai-c flex-jc-sb">
				<view>小计</view>
				<view>{{info.total_money}}</view>
			</view>
		</pageLoading>
	</view>
</template>

<script>
	import pageLoading from '@/components/pageLoading.vue';
	import order from '@/api2/order.js';
	export default {
		components: {
			pageLoading
		},
		data() {
			return {
				info: {},
				isShow: false
			}
		},
		filters: {
			filterPay(v) {
				let text = ''
				switch (v) {
					case 1:
						text = '微信'
						break
					case 2:
						text = '支付宝,'
						break
				}
				return text
			},
			filterAuth(v) {
				let text = ''
				switch (v) {
					case 0:
						text = '待支付'
						break
					case 1:
						text = '待出货'
						break
					case 2:
						text = '已完成'
						break
				}
				return text
			}
		},
		computed: {
			price() {
				return (goods_price, quantity) => {
					return (goods_price / quantity).toFixed(2) || 0
				}
			}
		},
		onLoad(op) {
			this.getOrderInfo(op.id)
		},
		methods: {
			async getOrderInfo(id) {
				const res = await order.getOrderInfoMenber({
					order_id: id
				})
				this.info = res.data
				this.isShow = true
			}
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.main {
		.title {
			padding: 0 30rpx !important;
			background: #F2F2F2 !important;
			border: 0 !important;
			line-height: 90rpx;
			color: #333333 !important;
		}

		.card {
			padding: 0 40rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #D8D8D8;
			background: #fff;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>